<template>
  <el-dialog
    @close="cancel"
    :visible.sync="open"
    width="600px"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="../../../../assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />预览
      </div>
    </template>
    <div class="showPhoto">
      <img class="picPreview" :src="picUrl" alt="图片加载失败" />
    </div>

    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ["picUrl"],
  data() {
    return {
      open: false,
    };
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式
.dialogClass {
  ::v-deep .el-dialog__body {
    padding: 10px 30px !important;
  }
}
.showPhoto {
  display: flex;
  align-items: center;
  justify-content: center;
}
.picPreview {
  max-width: 100%;
}
</style>
